<template>
	<view class='box'>
		<image class='icon' :src="iconsrc" mode="widthFix"></image>
		<input class='input-content' type="text" :placeholder="placeholdertext">
		<text v-if='isgetcode&&show' class='getcode' @click="CountDown()">获取验证码</text>
		<text v-if='isgetcode&&!show' class='getcode' >{{count}}s后重新获取</text>
	</view>
</template>

<script>
	export default {
		props: ['iconsrc', 'placeholdertext', 'isgetcode'],
		data() {
			return {
				// 控制发送验证码和重新获取之间的切换
				show: true,
				// 验证码秒数
				count: '',
				// 是否开始倒计时
				timer: null,
				// 测试数据
				test:'123'
			}
		},
		onLoad() {

		},
		methods: {
			// 倒计时的方法
			CountDown() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
		}
	}
</script>

<style lang='less' scoped>
	.box {
		width: 100%;
		padding: 50rpx 0rpx;
		display: flex;
		border-bottom: 1rpx solid #eee;

		.icon {
			width: 40rpx;
		}

		.input-content {
			margin-left: 33rpx;
			flex-grow: 1;
		}

		.getcode {
			display: block;
			margin-left: 50rpx;
			width: 200rpx;
			text-align: right;
			font-size: 30rpx;
			color: #2F70F1;
		}
	}
</style>
